<template>
  <div class="system-role-dialog-container">
    <el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="600px">
      <el-form ref="roleDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="0"
        v-loading="state.dataLoading" label-position="left" style="min-height: 50px">
        <el-form-item label="" prop="checkedRadio">
          <el-radio-group v-model="state.ruleForm.checkedRadio" size="default"
            @change="state.ruleForm.childrenCheckedList = []">
            <el-radio v-for="(item, index) in state.qsList" :key="index" :label="item.id" style="width: 100%">
              <div>
                {{ item.text }}
              </div>
              <div v-if="state.ruleForm.checkedRadio == 4" style="padding-left: 20px;">
                <el-checkbox-group v-model="state.ruleForm.childrenCheckedList" size="default" class="check-box">
                  <el-checkbox v-for="(it, index) in item.children" :key="index" :label="it.id" style="width: 100%;">{{
                    it.text }}</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-input v-model="state.ruleForm.remarks" size="default" placeholder="请输入备注" type="textarea" maxlength="100"
          show-word-limit> </el-input>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" :loading="state.btnLoading" @click="onSubmit" size="default">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="signPatient">
import { RecordLogApi } from '/@/api/record/log';
import { ElMessage } from 'element-plus';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const roleDialogFormRef = ref();
const state = reactive({
  ruleForm: {
    checkedRadio: null,
    remarks: '',
    childrenCheckedList: []
  },
  rules: {
    checkedRadio: [{ required: true, message: '请选择', trigger: 'change' }],
  },
  dialog: {
    isShowDialog: false,
    title: '患者类型标记',
    submitTxt: '',
  },
  detailConfig: null,
  dataLoading: false,
  qsList: [],
  btnLoading: false,
});

// 打开弹窗
const openDialog = (row) => {
  state.detailConfig = row;
  state.dialog.isShowDialog = true;
  state.dataLoading = true;
  RecordLogApi()
    .getPatientSign(row)
    .then((res) => {
      state.dataLoading = false;
      state.qsList = res.data.selected;
      state.ruleForm.remarks = res.data.remarks;
      res.data.selected.forEach(item=>{
        if(item.is_selected){
          state.ruleForm.checkedRadio = item.id
        }
        if(item.id == 4){
          const childIdList = []
          item.children.forEach(it=>{
            if(it.is_selected){
              childIdList.push(it.id)
            }
          })
          state.ruleForm.childrenCheckedList = childIdList
        }
      })
    })
    .catch(() => {
      state.dataLoading = false;
    });
};
// 关闭弹窗
const closeDialog = () => {
  state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
  closeDialog();
};
// 提交
const onSubmit = () => {
  roleDialogFormRef.value.validate((valid, fields) => {
    if (valid) {
      if (state.ruleForm.checkedRadio == 4 && state.ruleForm.childrenCheckedList.length == 0) {
        ElMessage.warning('请选择子选项!');
      } else {
        state.btnLoading = true
        const selected = [...state.ruleForm.childrenCheckedList, ...[state.ruleForm.checkedRadio]]
        const apiData = {
          patient_id: state.detailConfig.patient_id,
          rel_id: state.detailConfig.rel_id,
          rel_type: state.detailConfig.rel_type,
          selected: selected,
          remarks: state.ruleForm.remarks
        }
        RecordLogApi().setPatientSign(apiData).then(res => {
          state.btnLoading = false
          ElMessage.success('操作成功');
          closeDialog();
          emit('refresh');
        }).catch(() => {
          state.btnLoading = false
          closeDialog();
          emit('refresh');
        })
      }
    }
  })

};

// 暴露变量
defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss">
.el-radio {
  height: auto !important;
  align-items: flex-start !important;

  :deep() .el-radio__input {
    margin-top: 8px !important;
  }
}

.check-box {
  display: flex;
  flex-wrap: wrap;
}
</style>
